<template>
    <el-container class="layout-container-demo" style="height: 500px">
      <el-aside style="width: 200px;">
        <common-aside />
      </el-aside>
  
      <el-container class="r-container">
        <el-header>
         <common-header />
        </el-header>
  
        <el-main>
          
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  import {defineComponent} from 'vue'
  
  import CommonHeader from '../components/CommonHeader.vue'
  import CommonAside from '../components/CommonAside.vue'
  export default defineComponent({
      components:{
        CommonHeader,
        CommonAside
    },
  });
  </script>
  
 
  
  <style scoped>
  .r-container{
    flex-wrap: wrap;
  }
  .layout-container-demo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 可以添加其他样式，确保适应你的布局需求 */
  } 
  </style>


  